<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
  <style>
    .title {
      line-height : 70px;
      font-size   : 30px;
      color       : #000;
      font-weight : bold;
      text-align  : center;
    }
    .vote-list {
      width   : 240px;
      margin  : 0 auto;
      padding : 0;
    }
    .vote-list li {
      padding     : 0 20px;
      line-height : 40px;
      font-size   : 14px;
      background  : #fff;
    }
    .vote-list li:nth-child(odd) {
      background : #f8f8f8;
    }
    .vote-list .name {
      float       : left;
      clear       : left;
      font-weight : bold;
      color       : #000;
    }
    .vote-list .like {
      float : right;
      clear : right;
    }
    .vote-list .clear {
      clear : both;
    }
  </style>
</head>
<body>

  <div class="title">Bigg2 Channel Stat</div>

  <ul class="section-list vote-list" style="list-style:none;">
    <li>
      <div class="name">TOTAL</div>
      <div class="like channel-count"></div>
      <div class="clear"></div>
    </li>
    <li>
      <div class="name">Splash</div>
      <div class="like channel-count"></div>
      <div class="clear"></div>
    </li>
    <li>
      <div class="name">TopBanner</div>
      <div class="like channel-count"></div>
      <div class="clear"></div>
    </li>
    <li>
      <div class="name">Push</div>
      <div class="like channel-count"></div>
      <div class="clear"></div>
    </li>
    <li>
      <div class="name">SearchHotword</div>
      <div class="like channel-count"></div>
      <div class="clear"></div>
    </li>
    <li>
      <div class="name">Menu</div>
      <div class="like channel-count"></div>
      <div class="clear"></div>
    </li>
    <li>
      <div class="name">SpeedDialU3</div>
      <div class="like channel-count"></div>
      <div class="clear"></div>
    </li>
    <li>
      <div class="name">SpeedDialMini</div>
      <div class="like channel-count"></div>
      <div class="clear"></div>
    </li>

  </ul>

  <div class="title">Bigg2 Vote List</div>

  <ul class="section-list vote-list" style="list-style:none;">

    <li>
      <div class="name">Swami Om</div>
      <div class="like vote-count"></div>
      <div class="clear"></div>
    </li>
    <li>
      <div class="name">Lopa Mudra</div>
      <div class="like vote-count"></div>
      <div class="clear"></div>
    </li>
    <li>
      <div class="name">Rohan Mehra</div>
      <div class="like vote-count"></div>
      <div class="clear"></div>
    </li>
    <li>
      <div class="name">Gaurav Chopra</div>
      <div class="like vote-count"></div>
      <div class="clear"></div>
    </li>
    <li>
      <div class="name">Bani</div>
      <div class="like vote-count"></div>
      <div class="clear"></div>
    </li>
    <li>
      <div class="name">Rahul Dev</div>
      <div class="like vote-count"></div>
      <div class="clear"></div>
    </li>
    <li>
      <div class="name">Priyanka Jagga</div>
      <div class="like vote-count"></div>
      <div class="clear"></div>
    </li>
    <li>
      <div class="name">Monalisa</div>
      <div class="like vote-count"></div>
      <div class="clear"></div>
    </li>
    <li>
      <div class="name">Manveer</div>
      <div class="like vote-count"></div>
      <div class="clear"></div>
    </li>
    <li>
      <div class="name">Nithibha Kaul</div>
      <div class="like vote-count"></div>
      <div class="clear"></div>
    </li>
    <li>
      <div class="name">Manu Punjabi</div>
      <div class="like vote-count"></div>
      <div class="clear"></div>
    </li>

  </ul>

  <script src="js/lib/zepto.min.js"></script>
  <script>

    function queryData(begin, end, success) {
        return $.ajax({
            url      : 'http://www.huihaicenter.com/api/uc_yd/api.php',
            dataType : 'jsonp',
            data     : {
                action : 'query',
                start  : begin,
                end    : end
            },
            success: success
        });
    }

    queryData(70, 80, function(resp) {

        var els = $('.channel-count');

        for (var i = 0; i < els.length; ++i) {
            els.eq(i).html(resp.data[i]);
        }
    });

    queryData(51, 71, function(resp) {

        var els = $('.vote-count');

        for (var i = 0; i < els.length; ++i) {
            els.eq(i).html(resp.data[i]);
        }
    });

  </script>

</body>

</html>
